
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
import { Modal, Form, Tabs, Input, Button, Checkbox, Select, Row, Col, message, Spin } from 'antd';
import QRCode from "qrcode.react";
import { setStore, getStore } from '@/utils/commons'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss';
const { TabPane } = Tabs;
const { Option } = Select;

function BindGoogle(props, ref) {
    const [load, setLoad] = useState(false)
    const [googleImg, setGoogleImg] = useState('loading')
    const [googleKey, setGoogleKey] = useState()
    const [status, setStatus] = useState(false)
    const [form] = Form.useForm();

    useImperativeHandle(ref, () => {
        return { openModal, cancelModal }
    })
    const openModal = () => {
        setStatus(true)
        getGoogle()
    }

    const cancelModal = () => {
        setStatus(false)
    }

    const getGoogle = async () => {
        let res = await API.getGoogle()
        if (res) {
            setGoogleImg(res.data.QRCode)
            setGoogleKey(res.data.secretKey)
        }
    }

    const onFinish = async (values) => {
        let opts = { secretKey: googleKey, onceCode: values.secretKey }
        let res = await API.bindGoogle(opts)
        setLoad(true)
        if (res) {
            setLoad(false)
            message.success('绑定GoogleAuth成功')
            setTimeout(() => { window.location.reload() }, 500)
        } else {
            setLoad(false)
        }
    };


    return (
        <Modal className="bind-google" visible={status} onCancel={cancelModal} footer={null}>
            {
                !load ? null :
                    <div className="load-mark">
                        <Spin />
                    </div>
            }

            <Form
                form={form}
                className="bind-form"
                onFinish={onFinish}
            >
                <Row justify="center">
                    <h2 className="bind-title">绑定GoogleAuth</h2>
                </Row>
                <Row justify="center" align="middle">
                    <QRCode
                        value={googleImg}
                        size={160}
                        bgColor='#fff'
                        fgColor='#000'
                    />
                </Row>
                <Row className="google-code" justify="center" align="middle">
                    <h2>{googleKey}</h2>
                </Row>
                <Form.Item name="secretKey" rules={[
                    { required: true, message: '请输入密钥', },
                ]}>
                    <Input className="bind-input" placeholder="请输入密钥" bordered={false} />
                </Form.Item>


                <Form.Item>
                    <Button type="primary" htmlType="submit" className="bind-form-button">
                        绑定
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default forwardRef(BindGoogle)